<!DOCTYPE html>  
<html lang="zh-Hans">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <meta http-equiv="X-UA-Compatible" content="ie=edge">  
    <title>简单的网页</title>  
    <style>  
        * {  
            box-sizing: border-box;  
        }  
  
        body {  
            font-family: Arial, sans-serif;  
            margin: 0;  
            padding: 0;  
        }  
  
        .header {  
            padding: 80px;  
            text-align: center;  
            background: #1abc9c;  
            color: white;  
        }  
  

        .navbar {  
            overflow: hidden;  
            background-color: #333;  
        }  
  
        .navbar a {  
            float: left;  
            display: block;  
            color: white;  
            text-align: center;  
            padding: 14px 20px;  
            text-decoration: none;  
        }  
  
        .navbar a.right {  
            float: right;  
        }  
  
        .navbar a:hover {  
            background-color: #ddd;  
            color: black;  
        }  
  

        .row {  
            display: flex;  
        }  
  
        .side {  
            flex: 30%;  
            background-color: #f4f4f4;  
            padding: 20px;  
        }  
  
        .side h2 {  
            color: #ff4500;  
        }  
  
        .fakeimg {  
            background-color: #aaa;  
            width: 100%;  
            padding: 10px;  
            margin-top: 10px;  
        }  
   
        .main {  
            flex: 70%;  
            background-color: white;  
            padding: 20px;  
        }  
  
        .main h2 {  
            color: #333;  
        }  
  
        .footer {  
            background-color: #333;  
            color: white;  
            text-align: center;  
            padding: 10px 0;  
            position: fixed;  
            width: 100%;  
            bottom: 0;  
        }  
  
    </style>  
</head>  
<body>  
    <div class="header">  
        <h1>简单的页面</h1>  
        <p>创建一个页面。</p>  
    </div>  
  
    <div class="navbar">  
        <a href="#">链接</a>  
        <a href="#">链接</a>  
        <a href="#">链接</a>  
        <a href="#" class="right">链接</a>  
    </div>  
  
    <div class="row">  
        <div class="side">  
            <h2>关于我</h2>  
            <h5>我的照片:</h5>  
            <div class="fakeimg" style="height:200px;">这边插入图像</div>  
            <p>关于我的介绍..</p>  
            <h3>更多内容</h3>  
            <p>我的更多内容</p>  
            <div class="fakeimg" style="height:60px;">这边插入图像</div>  
            <br>  
            <div class="fakeimg" style="height:60px;">这边插入图像</div>  
            <br>  
            <div class="fakeimg" style="height:60px;">这边插入图像</div>  
        </div>  
        <div class="main">  
            <h2>标题</h2>  
            <h5>副标题</h5>  
            <div class="fakeimg" style="height:200px;">图像</div>  
            <p>一些文本..</p>  
            <br>  
            <h2>标题</h2>  
            <h5>副标题</h5>  
            <div class="fakeimg" style="height:200px;">图像</div>  
            <p>一些文本..</p>  
        </div>  
    </div>  
  
    <div class="footer">  
        <h2>底部内容</h2>  
    </div>  
</body>  
</html>